
<template>
  <div class="consumers">
    <el-row style="background: #ccffff;margin-top: 10px">
      <el-col :span="12"><div class="grid-content bg-purple-light" id="main" style="width:450px;height:500px;margin-top:30px;margin-left:70px;"><consumers1></consumers1></div></el-col>
      <el-col :span="10"><div  id="main1" style="width:450px;height:500px;margin-top:30px;margin-left:70px" ></div></el-col>
    </el-row>
  <div class="footerbox">
    <!--style="background: black;width: 100%;height: 200px;margin-bottom: 500px"-->>

    <el-menu
      background-color="#000000"
      text-color="white"
      style="width: 100%;height: 180px"
    >

      <el-menu-item style="margin-left: 500px;margin-top: auto">
        <el-button type="text" icon="el-icon-medal-1">菜鸟品牌</el-button>
        <el-button type="text" icon="el-icon-phone-outline">联系我们</el-button>
        <el-button type="text" icon="el-icon-s-shop">合作申请</el-button>
        <el-button type="text" icon="el-icon-message-solid">廉政举报</el-button>
        <el-button type="text" icon="el-icon-document">法律政策</el-button>
        <el-button type="text" icon="el-icon-success">菜鸟合规</el-button>
        <h2 style="font-feature-settings:'微软雅黑 ';line-height: 1.5em;">
          加入我们</h2> <small> <p style="font-feature-settings:'微软雅黑 ';line-height: 1.5em; margin-left: 400px;margin-top: -45px"><img src="../../assets/er1.jpg" width="100px" >
          <br>下载菜鸟果果APP</p></small>




      </el-menu-item>
      <img src="../../assets/top1.png" width="120px" style="margin-left:80px;margin-top: -50px">
      <br>
      <br>
      <img src="../../assets/xinlang.png" width="30px" style="margin-left:80px">
      <img src="../../assets/wx.png" width="30px" style="margin-left:30px">
    </el-menu>
  </div>
  </div>
</template>

<script>
  import consumers1 from "../../components/consumers1";
  export default {
    name: 'consumers',
    components: {consumers1},
    mounted() {
      this.init()
    },
    methods: {
      init: function () {
        var app = {};
        var myChart = this.$echarts.init(document.getElementById('main1'));
        myChart.setOption({
          title: {

            text: '菜鸟用户数据统计',
          },


          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',

              },

            }
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }

          },legend: {
            data: ['使用人数', '注册率', '平均注册率'],
            right:5,
            bottom:4
          },

          xAxis: [
            {
              type: 'category',
              data: [ '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '使用人数',
              min: 0,
              max: 300,
              interval: 50,
              axisLabel: {
                formatter: '{value} 万'
              }
            },
            {
              type: 'value',
              name: '注册率',
              min: 0,
              max: 30,
              interval: 5,
              axisLabel: {
                formatter: '{value} %'
              }
            }
          ],
          series: [
            {
              name: '使用人数',
              type: 'bar',
              data: [ 4.9, 7.0, 23.2, 25.6, 76.7, 110.6, 120.8, 130.8,160.7 , 180.9, 240.8]
            },
            {
              name: '注册率',
              type: 'bar',
              data: [2.6, 5.9, 9.0, 20.9, 45.6, 80.3, 102.8, 130.6, 146.6, 160.2, 200.8]
            },
            {
              name: '平均注册率',
              type: 'line',
              yAxisIndex: 1,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 24.0, 24.5, 25.0]
            }
          ]
        });
        myChart.setOption(option)
      }
    }
  }
</script>
<style>
  .footerbox {
    min-width: 1024px;
    max-width: 1920px;
    background: black;
    height: 240px;


  }
</style>


